// forwardRef 函数组件

import React, { LegacyRef } from 'react';

export default class ForwardRef extends React.Component {
  render(): React.ReactNode {
    return (
      <div>
        <GrandFather />
      </div>
    );
  }
}

// 爷组件
class GrandFather extends React.Component {
  refNode: LegacyRef<Father> | undefined = React.createRef<Father>();
  componentDidMount() {
    console.log('GrandFather', this.refNode); // span #text 这个是想要获取元素
  }
  render() {
    return (
      <div>
        <Father grandRef={this.refNode} />
      </div>
    );
  }
}

interface IProps {
  grandRef: any;
}

class Father extends React.Component<IProps> {
  constructor(props: IProps) {
    super(props);
  }
  render() {
    return (
      <div>
        {/* <Son grandRef={this.props.grandRef} /> */}
        <Son1 grandRef={this.props.grandRef} />
      </div>
    );
  }
}

class Son extends React.Component<IProps> {
  constructor(props: any) {
    super(props);
  }
  render(): React.ReactNode {
    return (
      <div>
        <div> i am alien </div>
        <span ref={this.props.grandRef}>这个是想要获取元素</span>
      </div>
    );
  }
}

function Son1(props: any) {
  return (
    <div>
      <div> i am alien </div>
      <span ref={props.grandRef}>函数组件</span>
    </div>
  );
}
